<template>
  <div class="onlineDataBox">
    <div class="onlineDataBox-main">
      <!--      <button id="secondPageButton" style="cursor: pointer" @click="drawer = true">选择设备</button>-->
      <button id="onlineChartSelectButton" @click="getEquipmentName">{{ temp.equipmentName }}</button>
      <div class="firstOnlineChart">
        <online-chart :id="firstOnlineChart" :date="temp.date" :equipment-number="temp.equipmentNumber" />
      </div>
      <div class="secondOnlineChart">
        <second-online-chart :id="secondOnlineChart" :date="temp.date" :equipment-number="temp.equipmentNumber" />
      </div>
    </div>
    <div class="onlineDataBox-aside">
      <div class="onlineDataBoxFilter">
        <el-dialog
          title="选择数据"
          :visible.sync="drawer"
          width="30%"
        >
          <h2>起始时间</h2>
          <div class="datePicker">
            <el-date-picker
              v-model="temp.date"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始"
              end-placeholder="结束"
              align="right"
              style="width: 180px"
            />
          </div>
          <h2>选择设备</h2>
          <el-select v-model="temp.equipmentNumber" placeholder="请选择">
            <el-option
              v-for="(item,index) in equipmentNumberOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="getEquipmentName">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="onlineDataBoxElectricQuantity">
        <div class="electricQuantityChartBox">
          <electric-quantity :id="electricQuantityChart" :equipment-number="temp.equipmentNumber" />
        </div>

        <div class="uploadFrequencyChartBox">
          <upload-frequency-chart :id="uploadFrequencyChart" :equipment-number="temp.equipmentNumber" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { fetchEquipmentNumberOptions } from '@/api/dataManagement'
import OnlineChart from '@/views/dataManagement/components/onlineChart'
import ElectricQuantity from '@/views/dataManagement/components/electricQuantity'
import UploadFrequencyChart from '@/views/dataManagement/components/uploadFrequencyChart'
import SecondOnlineChart from '@/views/dataManagement/components/secondOnlineChart'
export default {
  components: { SecondOnlineChart, UploadFrequencyChart, ElectricQuantity, OnlineChart },
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          var isSelected = false
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            isSelected = time.getTime() <= minTime || time.getTime() > maxTime
          }
          return isSelected || time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: [{
          text: '最近1小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近12小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近24小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      uploadFrequencyChart: 'uploadFrequencyChart',
      electricQuantityChart: 'electricQuantityChart',
      equipmentNumberOptions: [],
      temp: { equipmentNumber: 'bd16265282985790001', equipmentName: '天籁湾-测试桩', date: null },
      listLoading: true,
      secondOnlineChart: 'secondOnlineChart',
      firstOnlineChart: 'firstOnlineChart',
      config: {
        value: 50,
        borderWidth: 5,
        borderRadius: 10,
        borderGap: 5
      },
      drawer: false
    }
  },
  watch: {

  },
  created() {
    this.getEquipmentNumberOptions()
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    getEquipmentNumberOptions() {
      fetchEquipmentNumberOptions().then((res) => {
        this.equipmentNumberOptions = res.data.equipmentNumberOptions
        /* if (this.equipmentNumberOptions.length !== 0) {
          for (const equipment of this.equipmentNumberOptions) {
            if (equipment.value === this.temp.equipmentNumber) {
              this.temp.equipmentName = equipment.label
            }
          }
        }*/
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getEquipmentName() {
      this.drawer = !this.drawer
      if (this.equipmentNumberOptions.length !== 0) {
        for (const equipment of this.equipmentNumberOptions) {
          if (equipment.value === this.temp.equipmentNumber) {
            this.temp.equipmentName = equipment.label
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.onlineDataBox {
  display: flex;
  width: auto;
}
.onlineDataBox-main {
  flex: 3;
}
.onlineDataBox-aside {
  flex: 1;
}
.onlineDataBoxElectricQuantity {
}
.electricQuantityChartBox{
  padding: 5px 5px 5px;
}
.uploadFrequencyChartBox {
  padding: 5px;
}
.firstOnlineChart {
  padding: 5px;
}
.secondOnlineChart {
  padding: 5px;
}
.onlineDataBoxFilter {
  display:flex;
  justify-content: center;
}
/*#secondPageButton {*/
/*  background-color: #1b275e;*/
/*  color: white;*/
/*  border: #1b275e;*/
/*}*/
#onlineChartSelectButton {
  background-color: #1b275e;
  font-size: 25px;
  color: white;
  position: absolute;
  text-decoration: underline;
  border-color: #1b275e;
  left: 171px;
  top: 18px;
  cursor: pointer;
  z-index: 99;
}
/*.datePicker {*/
/*  width: 50px;*/
/*}*/
</style>
